<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <script crossorigin="anonymous" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>

    <style>
        body {
            font-size: 12px;
        }

        .row {
            height: 30px;
            clear: both;
        }

        .row .left {
            float: left;
            width: 40px;
        }

        .row .right {
            float: left;
        }

        #form {
            width: 300px;
            margin: auto;
            margin-top: 100px;
        }

        .button {
            border: 0;
            background-color: paleturquoise;
            font-size: 12px;
            padding: 4px;
        }
    </style>


</head>
<body>
<div id="form">
    <form action="/user/add" method="get">
        <div class="row">
            <div class="left">姓名:</div>
            <div class="right"><input type="text" id="name"></div>
        </div>
        <div class="row">
            <div class="left">性别:</div>
            <div class="right"><input type="text" id="sex"></div>
        </div>
        <div class="row">
            <div class="left">年龄:</div>
            <div class="right"><input type="text" id="age"></div>
        </div>
        <div class="row">
            <div class="left">密码:</div>
            <div class="right"><input type="text" id="password"></div>
        </div>
        <div class="row">
            <div class="left"></div>
            <div class="right">
                <input type="button" value="添加用户" id="btnAddUser" class="button">
                <input type="reset" value="重置" id="btnReset" class="button">
            </div>
        </div>
    </form>

</div>


<script type="text/javascript">
    $(document).ready(function () {

        $("#btnAddUser").click(function () {
            var name = $("#name").val();
            var sex = $("#sex").val();
            var age = $("#age").val();
            var password=$("#password").val();

            if (!name || !sex || !age||!password) {
                alert('请检查表单必填项,用户名、性别、年龄全部都要填写')
                return;
            }
            $.get('/user/add', {
                name: name,
                sex: sex,
                age: age,
                password:password
            }, function (res) {
                if (res.code === 1) {
                    alert('添加成功');
                    location.href = "/view/users";
                } else {
                    alert(res.message);
                }
            }, 'json')
        });


    });

</script>

</body>
</html>